<template>
    <div class="container-content">
        <div class="container-content-title">{{ $t('platform.setting.access-key.title') }} (Wallet)
            <div class="flex" v-if="dataStatus == 'dle' && data.id != null">
                <el-button type="text" class="p-0" @click="dialogVerify" v-if="data.deleted == null">{{ $t('action.verify') }}</el-button>
                <el-button type="text" class="p-0" @click="dialogRestore" v-if="data.deleted != null">{{ $t('action.on') }}</el-button>
                <el-button type="text" class="p-0" @click="dialogDestroy" v-if="data.deleted == null">{{ $t('action.off') }}</el-button>
                <el-button type="text" class="p-0" @click="dialogUpdate" v-if="data.deleted == null">{{ $t('action.edit') }}</el-button>
            </div>
        </div>
        <component-page-loading :status="dataStatus" v-if="['loading', 'error'].indexOf(dataStatus) >= 0" @reload="getData"></component-page-loading>
        <component-page-loading status="nodata" nodata-init @create="dialogUpdate" v-else-if="data.id == null"></component-page-loading>
        <el-form label-width="180px" class="detail" v-else>
            <el-row>
                <el-col :xl="12">
                    <el-form-item :label="$t('platform.setting.wallet.config.baseUrl')">
                        <div :class="{'line-through': data.deleted != null}">{{ data.config.baseUrl }}</div>
                    </el-form-item>
                </el-col>
                <el-col :xl="12">
                    <el-form-item :label="$t('platform.setting.wallet.config.apis.openWalletOrder.url')">
                        <div :class="{'line-through': data.deleted != null}">{{ data.config.apis.openWalletOrder.url }}</div>
                    </el-form-item>
                </el-col>
                <el-col :xl="12">
                    <el-form-item :label="$t('platform.setting.wallet.config.apis.openWalletBalance.url')">
                        <div :class="{'line-through': data.deleted != null}">{{ data.config.apis.openWalletBalance.url }}</div>
                    </el-form-item>
                </el-col>
                <el-col :xl="12">
                    <el-form-item :label="$t('platform.setting.wallet.config.apis.openWalletConsume.url')">
                        <div :class="{'line-through': data.deleted != null}">{{ data.config.apis.openWalletConsume.url }}</div>
                    </el-form-item>
                </el-col>
                <el-col :xl="12">
                    <el-form-item :label="$t('platform.setting.wallet.config.apis.openWalletTakeBack.url')">
                        <div :class="{'line-through': data.deleted != null}">{{ data.config.apis.openWalletTakeBack.url }}</div>
                    </el-form-item>
                </el-col>
                <el-col :xl="12">
                    <el-form-item :label="$t('platform.setting.wallet.config.timeout')">
                        <div :class="{'line-through': data.deleted != null}">{{ data.config.timeout }}<small class="text-Info-custom">ms</small></div>
                    </el-form-item>
                </el-col>
                <el-col :xl="12">
                    <el-form-item :label="$t('platform.setting.wallet.public_key')">
                        <div :class="{'line-through': data.deleted != null}">
                            <pre class="leading-tight">{{ data.public_key }}</pre>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :xl="12">
                    <el-form-item :label="$t('platform.setting.wallet.sys_public_key')">
                        <div :class="{'line-through': data.deleted != null}" class="flex items-center" style="min-height: 40px">
                            <pre class="leading-tight">{{ data.sys_public_key }}</pre>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-dialog :title="$t('platform.setting.access-key.dialog.update')" width="600px" :visible.sync="dialog.visible.update">
            <div class="pr-12">
                <el-form :model="dataCache" label-width="120px">
                    <el-form-item :label="$t('platform.setting.wallet.config.baseUrl')" :error="Boolean(msg.errors['config.baseUrl']) ? msg.errors['config.baseUrl'][0] : ''" required>
                        <el-input v-model="dataCache.config.baseUrl" placeholder="http://127.0.0.1:1024"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('platform.setting.wallet.config.apis.openWalletOrder.url')" :error="Boolean(msg.errors['config.apis.openWalletOrder.url']) ? msg.errors['config.apis.openWalletOrder.url'][0] : ''" required>
                        <el-input v-model="dataCache.config.apis.openWalletOrder.url" placeholder="/open/wallet/order"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('platform.setting.wallet.config.apis.openWalletBalance.url')" :error="Boolean(msg.errors['config.apis.openWalletBalance.url']) ? msg.errors['config.apis.openWalletBalance.url'][0] : ''" required>
                        <el-input v-model="dataCache.config.apis.openWalletBalance.url" placeholder="/open/wallet/balance"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('platform.setting.wallet.config.apis.openWalletConsume.url')" :error="Boolean(msg.errors['config.apis.openWalletConsume.url']) ? msg.errors['config.apis.openWalletConsume.url'][0] : ''" required>
                        <el-input v-model="dataCache.config.apis.openWalletConsume.url" placeholder="/open/wallet/consume"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('platform.setting.wallet.config.apis.openWalletTakeBack.url')" :error="Boolean(msg.errors['config.apis.openWalletTakeBack.url']) ? msg.errors['config.apis.openWalletTakeBack.url'][0] : ''" required>
                        <el-input v-model="dataCache.config.apis.openWalletTakeBack.url" placeholder="/open/wallet/takeBack"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('platform.setting.wallet.config.timeout')" :error="Boolean(msg.errors['config.timeout']) ? msg.errors['config.timeout'][0] : ''" required>
                        <el-input v-model.number="dataCache.config.timeout" type="number"><span slot="suffix">ms</span></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('platform.setting.wallet.sys_public_key')" :error="Boolean(msg.errors['sys_public_key']) ? msg.errors['sys_public_key'][0] : ''" required>
                        <el-input v-model="dataCache.sys_public_key" type="textarea" :rows="4"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('platform.setting.wallet.update_key.title')" v-if="dataCache.id != null">
                        <el-checkbox v-model="dataCache.update_key">{{ $t('platform.setting.wallet.update_key.desc') }}</el-checkbox>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">{{ $t('action.confirm') }}</el-button>
                        <el-button @click="dialog.visible.update = false">{{ $t('action.cancel') }}</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
        <el-dialog :title="$t('platform.setting.wallet.dialog.verify')" width="400px" :visible.sync="dialog.visible.verify">
            <div class="px-12 h-60">
                <el-form :model="dataVerify" label-position="top">
                    <el-form-item :label="$t('game.user.account_id')" :error="Boolean(msg.errors['account_id']) ? msg.errors['account_id'][0] : ''" required>
                        <el-input v-model="dataVerify.account_id" :placeholder="$t('platform.setting.wallet.dialog.account_id')"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="verify">{{ $t('action.verify') }}</el-button>
                        <el-button @click="dialog.visible.verify = false">{{ $t('action.cancel') }}</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
        <el-dialog :title="$t('platform.setting.access-key.dialog.destroy')" center width="320px" :visible.sync="dialog.visible.destroy">
            <div class="text-center" v-html="$t('confirm.access-key', { status: $t('action.off') })"></div>
            <div slot="footer">
                <el-button type="primary" @click="destroy">{{ $t('action.confirm') }}</el-button>
                <el-button @click="dialog.visible.destroy = false">{{ $t('action.cancel') }}</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="$t('platform.setting.access-key.dialog.restore')" center width="320px" :visible.sync="dialog.visible.restore">
            <div class="text-center" v-html="$t('confirm.access-key', { status: $t('action.on') })"></div>
            <div slot="footer">
                <el-button type="primary" @click="restore">{{ $t('action.confirm') }}</el-button>
                <el-button @click="dialog.visible.restore = false">{{ $t('action.cancel') }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "PlatformWallet",
    props: ['tree'],
    data() {
        return {
            dataStatus: 'dle',
            data: {
                id: null,
                update_key: null,
                config: {
                    timeout: null, //接口超时时间
                    baseUrl: 'http://127.0.0.1:1024', //访问基础地址
                    apis: {
                        //余额消耗记录查询接口配置
                        openWalletOrder: {method: "get", url: '/open/wallet/order'},
                        //钱包余额查询接口配置
                        openWalletBalance: {method: "get", url: '/open/wallet/balance'},
                        //钱包余额消耗接口配置
                        openWalletConsume: {method: 'post', url: '/open/wallet/consume'},
                        //钱包余额归还接口配置
                        openWalletTakeBack: {method: 'post', url: '/open/wallet/takeBack'},
                    },
                },
            },
            dataCache: {},
            dataInit: {},
            dataVerify: {
                plat_code: '',
                account_id: '',
            },
            dialog: {
                visible: {
                    update: false,
                    destroy: false,
                    restore: false,
                    verify: false,
                }
            },
            msg: {
                code: 200,
                message: '',
                errors: {},
            },
        }
    },
    watch: {
        tree: {
            deep: true,
            immediate: true,
            handler(n, o) {
                // 获取数据
                n.id != null && this.getData();
            }
        },
    },
    created() {
        // 备份初始数据
        this.dataInit = _.cloneDeep(this.data);
        this.dataCache = _.cloneDeep(this.data);
    },
    methods: {
        // 获取数据
        getData() {
            this.dataStatus = 'loading';
            axios.get('/platform/setting/wallet/getData', {
                params: {
                    plat_code: this.tree.code
                }
            }).then((response) => {
                if (_.includes([200, 44100], response.data.resp_msg.code)) {
                    this.data = response.data.resp_data || _.cloneDeep(this.dataInit);
                    this.dataStatus = 'dle';
                } else {
                    this.dataStatus = 'error';
                }
            })
        },
        initMsg() {
            this.msg.code = 200;
            this.msg.message = '';
            this.msg.errors = {};
        },
        // 显示模态框（编辑）
        dialogUpdate() {
            this.initMsg();
            // 缓存数据
            this.dataCache = _.cloneDeep(this.data);
            // 访问密钥
            this.$set(this.dataCache, 'update_key', false);
            // 平台code
            this.dataCache.plat_code = this.tree.code;
            // 显示模态框
            this.dialog.visible.update = true;
        },
        // 显示模态框（验证）
        dialogVerify() {
            this.initMsg();
            // 初始化数据
            this.dataVerify.plat_code = this.tree.code;
            this.dataVerify.account_id = '';
            // 显示模态框
            this.dialog.visible.verify = true;
        },
        // 显示模态框（禁用）
        dialogDestroy() {
            // 显示模态框
            this.dialog.visible.destroy = true;
        },
        // 显示模态框（恢复）
        dialogRestore() {
            // 显示模态框
            this.dialog.visible.restore = true;
        },
        onSubmit() {
            this.initMsg();
            // loading 状态 start
            let loading = this.$loading();
            // 保存数据
            axios.post('/platform/setting/wallet/updateOrCreate', this.dataCache).then((response) => {
                // loading 状态 close
                loading.close();
                // 逻辑处理
                if (response.data.resp_msg.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('messages.succeeded', {status: this.$t('action.edit')}),
                        showClose: true
                    });
                    // 更新数据
                    this.data = response.data.resp_data;
                    // 关闭模态框
                    this.dialog.visible.update = false;
                } else if (response.data.resp_msg.code == 42000) {
                    this.$message({
                        type: 'error',
                        message: response.data.resp_msg.message,
                        showClose: true
                    });
                    this.msg = response.data.resp_msg;
                } else {
                    this.$message({
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: this.$t('messages.failed', {status: this.$t('action.edit')}) + `<div class="mt-2">${response.data.resp_msg.message}</div>`,
                        showClose: true
                    });
                }
            })
        },
        verify() {
            this.initMsg();
            // loading 状态 start
            let loading = this.$loading();
            // 保存数据
            axios.post('/platform/setting/wallet/verify', this.dataVerify).then((response) => {
                // loading 状态 close
                loading.close();
                // 逻辑处理
                if (response.data.resp_msg.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('messages.succeeded', {status: this.$t('action.verify')}),
                        showClose: true
                    });
                } else if (response.data.resp_msg.code == 42000) {
                    this.$message({
                        type: 'error',
                        message: response.data.resp_msg.message,
                        showClose: true
                    });
                    this.msg = response.data.resp_msg;
                } else {
                    this.$message({
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: this.$t('messages.failed', {status: this.$t('action.verify')}) + `<div class="mt-2">${response.data.resp_msg.message}</div>`,
                        showClose: true
                    });
                }
            })
        },
        destroy() {
            // loading 状态 start
            let loading = this.$loading();
            // 保存数据
            axios.post('/platform/setting/wallet/destroy', {
                plat_code: this.tree.code
            }).then((response) => {
                // loading 状态 close
                loading.close();
                // 逻辑处理
                if (response.data.resp_msg.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('messages.succeeded', {status: this.$t('action.off')}),
                        showClose: true
                    });
                    // 更新数据
                    this.data = response.data.resp_data;
                    // 关闭模态框
                    this.dialog.visible.destroy = false;
                } else {
                    this.$message({
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: this.$t('messages.failed', {status: this.$t('action.off')}) + `<div class="mt-2">${response.data.resp_msg.message}</div>`,
                        showClose: true
                    });
                }
            })
        },
        restore() {
            // loading 状态 start
            let loading = this.$loading();
            // 保存数据
            axios.post('/platform/setting/wallet/restore', {
                plat_code: this.tree.code
            }).then((response) => {
                // loading 状态 close
                loading.close();
                // 逻辑处理
                if (response.data.resp_msg.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('messages.succeeded', {status: this.$t('action.on')}),
                        showClose: true
                    });
                    // 更新数据
                    this.data = response.data.resp_data;
                    // 关闭模态框
                    this.dialog.visible.restore = false;
                } else {
                    this.$message({
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: this.$t('messages.failed', {status: this.$t('action.on')}) + `<div class="mt-2">${response.data.resp_msg.message}</div>`,
                        showClose: true
                    });
                }
            })
        },
    }
}
</script>

<style scoped>

</style>
